<template>
    <div class="box">
        <van-empty image="https://img2.baidu.com/it/u=2116383193,1684883028&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            image-size="80">
            <template #description>
                <van-tag type="primary" size="large">用户登录</van-tag>
            </template>
        </van-empty>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
        </van-form>
        <div class="regist" style="">
            <van-tag type="primary" plain size="large" @click="goRegister">没账号，去注册</van-tag>
        </div>
    </div>
</template>

<script>
import { userLoginAPI } from "@/api/user";
export default {
    data() {
        return {
            username: "",
            password: ""
        }
    },
    methods: {
        // 点击注册链接，跳转到注册页面
        goRegister() {
            this.$router.push("/register");
        },
        // 登录
        onSubmit() {
            userLoginAPI({ username: this.username, password: this.password }).then((resp) => {
                if (resp.data.code === 20000) {
                    showNotify({
                        message: resp.data.message,
                        color: '#fff',
                        background: "#8dc149"
                    });
                    // 登录成功之后，需要将登录的用户信息存储到本地
                    localStorage.setItem("loginUser", JSON.stringify(resp.data.data));
                    // 踢回到对应跳转过来的页面
                    this.$router.back();
                } else {
                    showNotify({
                        type: 'danger',
                        message: resp.data.message,
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.regist {
    text-align: right;
    margin-right: 20px;
}
</style>